<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h2>当前值是：{{count}}</h2>
        <button @click="randomCount">随机变更数字</button>
        <h3>数字大小：{{type}}</h3>
        <h3>数字大小：{{typeFunc()}}</h3>
        <button @click="changeType">切换数字大小</button>
    </div>
<script>
    /* computed是用来定义计算属性的 */
    const {createApp,ref, computed} = Vue

    const config = {
        setup() {
            // 定义数据
            const count = ref(0)
            const randomCount = () => {
                count.value = 0
                count.value = Math.floor(Math.random() * 101)
            }
            // 定义计算属性（如果我们的逻辑比较复杂，建议使用计算属性而不是在模板中去用逻辑控制）
            /*
                计算属性的关键在于，它们是基于存储属性的值通过逻辑运算得出的。
                下面我们还定义了一个函数typeFunc也可以实现与计算属性一样的功能
                那我们是该用计算属性还是函数？
                    用计算属性的好处是它有缓存，计算属性的值会缓存，只有当依赖的数据发生变化时才会重新计算。
                    而使用函数则无法实现缓存，每次调用函数都会重新计算。
                    如果某个值的计算成本比较高，且不经常变化推荐使用计算属性！！！
                    如果每次访问都需要最新的结果，或者计算非常简单推荐使用函数！！！

                 计算属性有两个方法：get(),set()
                    get()是默认的就是当返回计算的结果
                    set()是当计算属性的值被修改时调用的

                 如果计算属性只提供了get()则表示是一个只读计算属性，不能修改计算属性的值
            */
            // const type = computed(() => {
            //     return count.value > 50 ? 'big' : 'small'
            // })
            const type = computed({
                get(){
                    return count.value > 50 ? 'big' : 'small'
                },
                set(newValue) {
                    if (newValue === 'big') {
                        count.value = 100
                    } else if (newValue === 'small') {
                        count.value = 0
                    }
                }
            })
            const typeFunc = function() {
                return count.value > 50 ? 'big' : 'small'
            }

            const changeType = () => {
                if (type.value === 'big') {
                    console.log("big --->small")
                    type.value = 'small'
                } else {
                    console.log('small--->big')
                    type.value = 'big'
                }
            }

            // 暴露外部使用
            return {count, randomCount,typeFunc,changeType, type}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>